<template>
	<div class="details clearfix">
		<!-- 商品属性 -->
		<div class="sui-navbar">
			<div class="navbar-inner filter">
				<ul class="sui-nav">
					<li :class="{ active: isOne }" @click="changeOrder('1')">
						<a
							>综合<span v-show="isOne"><span v-if="isAsc">⬆</span><span v-else>⬇</span></span></a
						>
					</li>
					<li :class="{ active: isTwo }" @click="changeOrder('2')">
						<a
							>价格<span v-show="isTwo"><span v-if="isAsc">⬆</span><span v-else>⬇</span></span></a
						>
					</li>
				</ul>
			</div>
		</div>
		<!-- 商品 -->
		<div class="goods-list">
			<ul class="yui3-g">
				<li class="yui3-u-1-5" v-for="value in dataListObj.goodsList" :key="value.id">
					<div class="list-wrap">
						<div class="p-img">
							<router-link :to="`/detail/${value.id}`"><img :src="value.defaultImg" /></router-link>
						</div>
						<div class="price">
							<strong>
								<em>¥</em>
								<i>{{ value.price }}</i>
							</strong>
						</div>
						<div class="attr">
							<a href="javascript:;" :title="value.title">{{ value.title }}</a>
						</div>
						<div class="commit">
							<i class="command">已有<span>2000</span>人评价</i>
						</div>
						<div class="operate">
							<a href="success-cart.html" class="sui-btn btn-bordered btn-danger">加入购物车</a>
							<a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'GoodsList',
	props: ['order'],
	computed: {
		...mapState('search', ['dataListObj']),
		isOne() {
			return this.order.indexOf('1') !== -1;
		},
		isTwo() {
			return this.order.indexOf('2') !== -1;
		},
		isDesc() {
			return this.order.indexOf('desc') !== -1;
		},
		isAsc() {
			return this.order.indexOf('asc') !== -1;
		},
	},
	methods: {
		changeOrder(num) {
			// 获取order的序号
			let orderNum = this.order.split(':')[0];
			// 获取order升序or降序
			let orderStr = this.order.split(':')[1];
			// 初始化新参数
			let newOrder = '';
			if (num === orderNum) {
				newOrder = `${orderNum}:${orderStr === 'desc' ? 'asc' : 'desc'}`;
			} else {
				newOrder = `${num}:${'desc'}`;
			}
			// 通知order修改参数
			this.$bus.$emit('changeOrderData', newOrder);
		},
	},
};
</script>

<style scoped>
.main .py-container .details {
	margin-bottom: 5px;
}
.main .py-container .details .sui-navbar {
	overflow: visible;
	margin-bottom: 0;
}
.main .py-container .details .sui-navbar .filter {
	min-height: 40px;
	padding-right: 20px;
	background: #fbfbfb;
	border: 1px solid #e2e2e2;
	padding-left: 0;
	border-radius: 0;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.main .py-container .details .sui-navbar .filter .sui-nav {
	position: relative;
	left: 0;
	display: block;
	float: left;
	margin: 0 10px 0 0;
}
.main .py-container .details .sui-navbar .filter .sui-nav li {
	float: left;
	line-height: 18px;
}
.main .py-container .details .sui-navbar .filter .sui-nav li a {
	display: block;
	cursor: pointer;
	padding: 11px 15px;
	color: #777;
	text-decoration: none;
}
.main .py-container .details .sui-navbar .filter .sui-nav li.active a {
	background: #e1251b;
	color: #fff;
}
.main .py-container .details .goods-list {
	margin: 20px 0;
}
.main .py-container .details .goods-list ul {
	display: flex;
	flex-wrap: wrap;
}
.main .py-container .details .goods-list ul li {
	height: 100%;
	width: 20%;
	margin-top: 10px;
	line-height: 28px;
}
.main .py-container .details .goods-list ul li .list-wrap .p-img {
	padding-left: 15px;
	width: 215px;
	height: 255px;
}
.main .py-container .details .goods-list ul li .list-wrap .p-img a {
	display: block;
	color: #666;
	height: 100%;
}
.main .py-container .details .goods-list ul li .list-wrap .p-img a img {
	display: block;
	margin: auto;
	max-width: 230px;
	max-height: 255px;
	/* vertical-align: middle; */
}
.main .py-container .details .goods-list ul li .list-wrap .price {
	padding-left: 15px;
	font-size: 18px;
	color: #c81623;
}
.main .py-container .details .goods-list ul li .list-wrap .price strong {
	font-weight: 700;
}
.main .py-container .details .goods-list ul li .list-wrap .price strong i {
	margin-left: 5px;
}
.main .py-container .details .goods-list ul li .list-wrap .attr {
	padding-left: 15px;
	width: 85%;
	overflow: hidden;
	margin-bottom: 8px;
	min-height: 38px;
	cursor: pointer;
	line-height: 1.8;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.main .py-container .details .goods-list ul li .list-wrap .attr a {
	color: #333;
	text-decoration: none;
}
.main .py-container .details .goods-list ul li .list-wrap .commit {
	padding-left: 15px;
	height: 22px;
	font-size: 13px;
	color: #a7a7a7;
}
.main .py-container .details .goods-list ul li .list-wrap .commit span {
	font-weight: 700;
	color: #646fb0;
}
.main .py-container .details .goods-list ul li .list-wrap .operate {
	padding: 12px 15px;
}
.main .py-container .details .goods-list ul li .list-wrap .operate .sui-btn {
	display: inline-block;
	padding: 2px 14px;
	box-sizing: border-box;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border-radius: 0;
	background-color: transparent;
	margin-right: 15px;
}
.main .py-container .details .goods-list ul li .list-wrap .operate .btn-bordered {
	min-width: 85px;
	background-color: transparent;
	border: 1px solid #8c8c8c;
	color: #8c8c8c;
}
.main .py-container .details .goods-list ul li .list-wrap .operate .btn-bordered:hover {
	border: 1px solid #666;
	color: #fff !important;
	background-color: #666;
	text-decoration: none;
}
.main .py-container .details .goods-list ul li .list-wrap .operate .btn-danger {
	border: 1px solid #e1251b;
	color: #e1251b;
}
.main .py-container .details .goods-list ul li .list-wrap .operate .btn-danger:hover {
	border: 1px solid #e1251b;
	background-color: #e1251b;
	color: white !important;
	text-decoration: none;
}
</style>
